import React from 'react';
import { Formik, Form, Field } from 'formik';
import AppBar from '../components/AppBar';
import { signIn } from '../api/auth';

class LoginForm extends React.Component {
    render() {
        return (
            <Formik
                onSubmit={(values, actions) => {
                    signIn()
                    actions.setSubmitting(false);
                }}
                render={({
                    values,
                    errors,
                    status,
                    touched,
                    handleBlur,
                    handleChange,
                    handleSubmit,
                    isSubmitting,
                }) => (
                        <form onSubmit={handleSubmit}>
                            <legend>登录饿了团</legend>
                            <div className="form-group">
                                <label htmlFor="login-type-select">登录为</label>
                                <select className="form-control" id="login-type-select"
                                    onChange={handleChange}
                                    value={values.type}>
                                    <option>我是顾客</option>
                                    <option>我是商家</option>
                                    <option>我是配送员</option>
                                </select>
                            </div>
                            <div className="form-group">
                                <label htmlFor="login-phone">手机号</label>
                                <input
                                    className="form-control"
                                    id="login-phone"
                                    type="text"
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    value={values.phone}
                                    disabled={isSubmitting}
                                />
                            </div>
                            <div className="form-group">
                                <label htmlFor="login-password">密码</label>
                                <input
                                    className="form-control"
                                    id="login-password"
                                    type="password"
                                    onChange={handleChange}
                                    onBlur={handleBlur}
                                    value={values.phone}
                                    disabled={isSubmitting}
                                />
                            </div>
                            <button
                                disabled={isSubmitting}
                                type="submit"
                                className="btn btn-lg btn-block btn-primary">登录</button>
                        </form>

                    )} />
        );
    }
}

class Login extends React.Component {
    render() {
        return (
            <div>
                <AppBar></AppBar>
                <div className="container">
                    <LoginForm></LoginForm>
                </div>
            </div>
        );
    }
};

export default Login;